<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div>
      <h1>避开闭包陷阱</h1>
      <div>
        <h2>闭包特点</h2>
        <p>1.外部具有指向内部的引用</p>
        <p>2.在"外(子)"部作用域访问"内(夫)"部作用域的数据</p>
      </div>
      <div>
        <h2>关于闭包</h2>
        <p>1.闭包是一种强大的语法</p>
        <p>2.闭包使用不当很容易出现内存泄漏</p>
        <p>3.不要为了闭包而闭包</p>
      </div>
    </div>
    <button id="btn">闭包陷阱</button>
    <script>
      //闭包特点
      function foo1() {
        var name = "xjq";
        return function fn() {
          console.log(name);
        };
      }
      foo1()();

      //闭包陷阱(产生内存泄漏)
      function foo2() {
        var el = document.getElementById("btn");
        el.onclick = function () {
          console.log(el.id);
        };
        //演示
        //优化--解决内存泄漏--释放内存空间
        el = null;
      }
      foo2();
    </script>
  </body>
</html>
